<template>
  <div>
    <!-- 添加按钮开始 -->
    <el-button type="primary" round @click="addHandler">添加</el-button>
    <!-- 添加按钮结束 -->
    <!-- 表格开始 -->
    <el-table :data="category" style="width: 100%">
      <!-- 订单编号 -->
      <el-table-column
        align="center"
        type="index"
        label="订单编号"
        width="100px"
      >
      </el-table-column>
      <!-- 名称 -->
      <el-table-column align="center" prop="name" label="名称">
      </el-table-column>
      <!-- 排序号 -->
      <el-table-column align="center" prop="no" label="排序号">
      </el-table-column>
      <!-- 描述 -->
      <el-table-column align="center" prop="description" label="描述">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button class="btn" @click="editHandler(scope.row)" type="text"
            >编辑</el-button
          >
          <el-button
            class="btn"
            @click="deleteHandler(scope.row.id)"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 对话框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- 表单开始 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="no">
          <el-input v-model="ruleForm.no"></el-input>
        </el-form-item>
        <el-form-item label="栏目介绍" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="submitHandler"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 对话框结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        no: "",
        description: "",
      },
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
      },
      dialogFormVisible: false,
      title: "",
    };
  },
  computed: {
    ...mapState("webInfo", ["category"]),
  },
  methods: {
    ...mapActions("webInfo", ["findAllCategory"]),
    // 添加
    addHandler() {
      this.title = "新增栏目信息";
      // 清空表单
      this.ruleForm = {};
      this.dialogFormVisible = true;
    },
    // 编辑
    editHandler(info) {
      this.title = "编辑栏目信息";
      this.ruleForm = info;
      this.dialogFormVisible = true;
    },
    // 删除
    deleteHandler(id) {
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          get("/category/deleteById", { id: id }).then((res) => {
            // 刷新界面
            this.findAllCategory();
            this.$message({
              type: "success",
              message: res.message,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 确认提交按钮
    submitHandler() {
      post("/category/saveOrUpdate", this.ruleForm).then((res) => {
        if (res.status === 200) {
          this.findAllCategory();
          this.$message({
            type: "success",
            message: res.message,
          });
        }
      });
      this.dialogFormVisible = false;
    },
  },
  created() {
    // 查询所有资讯信息
    this.findAllCategory();
  },
};
</script>
<style lang="css" scoped>
.btn:nth-child(1) {
  color: rgb(103, 194, 58);
}
.btn:nth-child(2) {
  color: orange;
}
.btn:hover {
  color: black;
}
</style>